Skip to content

feat(helper-text)!: port to <pf-v6-helper-text> - #3155

Open
adamjohnson wants to merge 13 commits into
staging/pfv6from
feat/v6-helper-text
Open

feat(helper-text)!: port to <pf-v6-helper-text>#3155
adamjohnson wants to merge 13 commits into
staging/pfv6from
feat/v6-helper-text

Conversation

@adamjohnson

@adamjohnson adamjohnson commented May 20, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Removes <pf-v5-helper-text>
  • Ports <pf-v5-helper-text> to <pf-v6-helper-text> web component for PatternFly v6
  • Displays contextual feedback or validation messages for form fields
  • Supports variant (default/indeterminate/warning/success/error), has-icon, dynamic, and screen-reader-text attributes
  • Built-in SVG icons from @patternfly/react-icons (rh-ui-minus, rh-ui-warning-fill, rh-ui-check-circle-fill, rh-ui-error-fill)
  • Dark mode support via light-dark() CSS fallbacks
  • Demos: basic (index), with-custom-icons, multiple, dynamic

Closes #3012

Intentional divergences from React

  • Single element instead of React's HelperText (container) + HelperTextItem (item) pair; use plain HTML wrappers with aria-live for grouping
  • has-icon attribute for opt-in icon display (React auto-shows icons for non-default variants)
  • icon slot replaces React's icon prop (ReactNode → slotted markup)
  • screen-reader-text attribute maps to React's screenReaderText prop
  • dynamic attribute exposes React's internal .pf-m-dynamic CSS modifier class
  • Container props (component, isLiveRegion, aria-label) not implemented; users apply these directly on wrapper elements
  • No dependency on <pf-v5-icon> — uses inline SVG icons

Test plan

  • npm run test passes
  • Demos render correctly at localhost:8000
  • All variant styles (colors, font weight, icons) visually match patternfly.org
  • Dark mode colors correct when switching color scheme
  • Screen reader text announces variant status for non-default variants
  • Custom screen-reader-text overrides default announcement
  • Empty screen-reader-text="" suppresses announcement
  • Custom icon slot displays slotted SVG in place of default icon
  • Dynamic demo shows aria-live container with mixed success/error items

Assisted-By: Claude

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AT passed Automated testing has passed

Projects

Status: PR Review

Development

Successfully merging this pull request may close these issues.

[feat]: Update <pf-v6-helper-text> for PatternFly v6

2 participants